<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--引入jquery-->
    <script src="js/jquery-3.5.1.min.js"></script>
    <!--先引入Vue-->
    <script src="js/vue.js"></script>
    <!--在引入基于vue的element-ui框架-->
    <script src="js/index.js"></script>
    <link rel="stylesheet" href="css/index.css" type="text/css"/>
    <style>
        /*body{*/
        /*    background-image: url("timg.jpg");*/
        /*}*/
        /*给所有td加上实线边框及文本居中*/
        td{
            border:1px rgba(0,0,0,0.2) solid;
            text-align:center;
        }
        /*将表格居中，需先给其一个宽度*/
        table{
            width:600px;
            margin:0 auto;
            background-color: white;
        }
        /*form表单里面的最后一个div(subimt提交按钮)设置居中*/
        form>div:last-child{
            width:50px;
            margin:0 auto;
        }
        /*为偶数行设置一个背景颜色*/
        tr:nth-child(even){
            background-color: rgba(0,0,0,.2);
        }
        /*为奇数行设置一个背景颜色*/
        tr:nth-child(odd){
            background-color: rgba(0,0,0,.1);
        }
        /*鼠标悬停在每个tr上改变其背景颜色*/
        tr:hover{
            background-color:rgb(135,206,250);
        }
        /*为第一个tr设置一个背景颜色*/
        tr:first-child{
            background-color: rgb(105,105,105);
        }
        /*为form表单里的所有div设置内边距*/
        form>div{
            margin:10px;
        }
        /*给查询栏居中*/
        #select{
            width: 225px;
            margin: 20px auto 10px;
        }
        /*给添加按钮居中*/
        #add{
            width:100px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="select">
            <input type="text" name="uid" v-model="condition" placeholder="输入ID进行搜索" onfocus="this.select()"/>
            <button @click="query">搜索</button>
        </div>
        <table cellspacing="0" >
            <tr>
                <td>ID</td>
                <td>名字</td>
                <td>性别</td>
                <td>年龄</td>
                <td>生日</td>
                <td>编辑</td>
            </tr>
            <tr v-for="stu in StudentList">
                <td>{{stu.id}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.sex}}</td>
                <td>{{stu.age}}</td>
                <td>{{stu.birthday}}</td>
                <td>
                    <el-popover placement="right" width="250" trigger="click">
                        <form action="UpdateStu" method="get" onsubmit="return beforeSubmit(this)">
                            <div>编号：<input type="text" name="id" readonly v-model="stu.id"/></div>
                            <div>姓名：<input type="text" name="name" required placeholder="在此输入姓名"/></div>
                            <div>
                                性别：<input type="radio" name="sex" value="男" checked/>男
                                <input type="radio" name="sex" value="女"/>女
                            </div>
                            <div>年龄：<input type="text" name="age" required placeholder="*请输入0~100的有效年龄"/></div>
                            <div>年龄：<input type="date" name="birthday" required/></div>
                            <div><input type="submit" value="修改"/></div>
                        </form>
                        <button slot="reference">编辑</button>
                    </el-popover>
                    <button @click="DeleteStu(stu.id)">删除</button>
                </td>
            </tr>
        </table>
        <div id="add"><a href="add.html"><button>添加</button></a></div>
    </div>
</body>
<script>
    const myModel = {
      StudentList:[],
        condition:''
    };
    new Vue({
       el:"#app",
       data:myModel,
       methods:{
           //删除学生
           DeleteStu(id){
               console.log('进入删除ajax,id是：'+id);
               //验证确认删除
               if(confirm("确定要删除吗？")){
                   $.ajax({
                       url:'DeleteStu',
                       typt:'get',
                       data:{id:id},
                       dataType: 'json',
                       success(result){
                           console.log(result)
                           myModel.StudentList = result;
                       },
                       error() {
                           console.log("删除失败！");
                       },
                       timeout: 2000
                   })
               }else{
                   alert("已取消了操作！");
               }
           },
            //搜索框查寻
           query(){
               $.ajax({
                   url:"QueryStudent",
                   data:{
                       id:myModel.condition
                   },
                   type:"get",
                   dataType:"json",
                   success(re){
                       console.log(re)
                       myModel.StudentList = re;
                   },
                   error(){
                       console.log("查询访问后台失败！")
                   },
                   timeout:3000
               });
           }

       }
    });
    //验证年龄参数值
    function beforeSubmit(form){
        if(form.age.value>100||form.age.value<0){
            alert("请输入合法的年龄！");
            form.age.focus();
            return false;
        }
        return true;
    };

    //访问后台获取数据
    new Promise((resolve,reject)=>{
        resolve("ok");
    }).then(re =>{
        console.log(re);
        $.ajax({
            url:'AllStudents',
            type:"get",
            data:{},
            dataType:"json",
            success:result =>{
                console.log(result)
                myModel.StudentList = result;
            },error(){
                console.log('AllStudent获取全部信息异常')
            },
            timeout:3000
        });
    });
</script>
</html>